<!DOCTYPE html>
<HTML>
<HEAD><meta name="viewport" content="width=device-width, initial-scale=1">
<Title>Circular Bar Meter</Title>
<link type='text/css' rel='Stylesheet' href="maxchartapi.css" />
</HEAD>
<body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">

<p class="heading0">ChartDirector 7.0 (Java Edition)</p>
<p class="heading1">Circular Bar Meter</p>
<hr class="separator">
<div class="content">
<img src="images/circularbarmeter0.png" width='110' height='110'>&nbsp;&nbsp;<img src="images/circularbarmeter1.png" width='110' height='110'>&nbsp;&nbsp;<img src="images/circularbarmeter2.png" width='110' height='110'>&nbsp;&nbsp;<img src="images/circularbarmeter3.png" width='110' height='110'>&nbsp;&nbsp;<img src="images/circularbarmeter4.png" width='110' height='110'>&nbsp;&nbsp;<img src="images/circularbarmeter5.png" width='110' height='110'>&nbsp;&nbsp;<img src="images/circularbarmeter6.png" width='110' height='110'>&nbsp;&nbsp;<img src="images/circularbarmeter7.png" width='110' height='110'>
<br><br>
This example demonstrates circular bar meters.<br><br>
A circular bar meter can be created by using an <a href="AngularMeter.htm">AngularMeter</a> in a creative way.<br><br>
<ul><li> Create an <a href="AngularMeter.htm">AngularMeter</a> object using <a href="AngularMeter.AngularMeter.htm">AngularMeter.AngularMeter</a>.<br><br>
<li> Set the meter center and radius using <a href="AngularMeter.setMeter.htm">AngularMeter.setMeter</a>.<br><br>
<li> Hide the angular meter scale by setting their colors to <a href="Chart.Transparent.htm">Transparent</a> using <a href="BaseMeter.setMeterColors.htm">BaseMeter.setMeterColors</a> and <a href="AngularMeter.setCap.htm">AngularMeter.setCap</a>.<br><br>
<li> Draw two ring sectors - a "colored" sector and a "grey out" sector - using <a href="AngularMeter.addRingSector.htm">AngularMeter.addRingSector</a>. Together they form a complete circle.<br><br>
<li> In this example, angular gradient colors created using <a href="DrawArea.angleGradientColor.htm">DrawArea.angleGradientColor</a> are use in some of the meters to create the color scale.<br><br>
<li> Finally, text is added to the center of the meter using <a href="BaseChart.addText.htm">BaseChart.addText</a>.</ul>
</div>
<p class="heading1a">Source Code Listing</p>
<div class="content">
<b>[JSP Version]</b> jspdemo/circularbarmeter.jsp
<div class='codeblock'><code class='pre'>&lt;%@page import="ChartDirector.*, java.util.*" %&gt;
&lt;%!
// Function to create the demo charts
void createChart(WebChartViewer viewer, int chartIndex)
{
    // The value to display on the meter
    double value = 77;

    // The meter radius and angle
    int radius = 50;
    double angle = value * 360.0 / 100;

    // Create an AngularMeter with transparent background
    AngularMeter m = new AngularMeter(radius * 2 + 10, radius * 2 + 10, Chart.Transparent);

    // Set the center, radius and angular range of the meter
    m.setMeter(m.getWidth() / 2, m.getHeight() / 2, radius, 0, 360);

    // For circular bar meters, we do not need pointer or graduation, so we hide them.
    m.setMeterColors(Chart.Transparent, Chart.Transparent, Chart.Transparent);
    m.setCap(0, Chart.Transparent);

    //
    // This example demonstrates several coloring styles
    //

    // Thd default fill and blank colors
    int fillColor = 0x6699ff;
    int blankColor = 0xeeeeee;

    if (chartIndex &gt;= 4) {
        // Use dark background style
        m.setColors(Chart.whiteOnBlackPalette);
        blankColor = 0x222222;
    }

    if (chartIndex % 4 == 1) {
        // Alternative fill color
        fillColor = 0xff6600;
    } else if (chartIndex % 4 == 2) {
        // Use a smooth color scale as the fill color
        int[] smoothColorScale = {0, 0x0022ff, 15, 0x0088ff, 30, 0x00ff00, 55, 0xffff00, 80,
            0xff0000, 100, 0xff0000};
        fillColor = m.getDrawArea().angleGradientColor(m.getWidth() / 2, m.getHeight() / 2, 0, 360,
            radius, radius - 20, smoothColorScale);
    } else if (chartIndex % 4 == 3) {
        // Use a step color scale as the fill color
        int[] stepColorScale = {0, 0x0044ff, 20, 0x00ee00, 50, 0xeeee00, 70, 0xee0000, 100};
        fillColor = m.getDrawArea().angleGradientColor(m.getWidth() / 2, m.getHeight() / 2, 0, 360,
            radius, radius - 20, stepColorScale);
    }

    // Draw the blank part of the circular bar
    if (angle &lt; 360) {
        m.addRingSector(radius, radius - 20, angle, 360, blankColor);
    }

    // Draw the fill part of the circular bar
    if (angle &gt; 0) {
        m.addRingSector(radius, radius - 20, 0, angle, fillColor);
    }

    // Add a label at the center to display the value
    m.addText(m.getWidth() / 2, m.getHeight() / 2, m.formatValue(value, "{value}"), "Arial", 25,
        Chart.TextColor, Chart.Center).setMargin(0);

    // Output the chart
    viewer.setChart(m, Chart.SVG);
}
%&gt;
&lt;%
// This example includes 8 charts
WebChartViewer[] viewers = new WebChartViewer[8];
for (int i = 0; i &lt; viewers.length; ++i) {
    viewers[i] = new WebChartViewer(request, "chart" + i);
    createChart(viewers[i], i);
}
%&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Circular Bar Meters&lt;/title&gt;
    &lt;!-- Include ChartDirector Javascript Library to support chart interactions --&gt;
    &lt;script type="text/javascript" src="cdjcv.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body style="margin:5px 0px 0px 5px"&gt;
    &lt;div style="font:bold 18pt verdana;"&gt;
        Circular Bar Meters
    &lt;/div&gt;
    &lt;hr style="border:solid 1px #000080; background:#000080" /&gt;
    &lt;div style="font:10pt verdana; margin-bottom:1.5em"&gt;
        &lt;a href="viewsource.jsp?file=&lt;%=request.getServletPath()%&gt;"&gt;View Source Code&lt;/a&gt;
    &lt;/div&gt;
    &lt;!-- ****** Here are the chart images ****** --&gt;
    &lt;%
        for (int i = 0; i &lt; viewers.length; ++i) {
            out.write(viewers[i].renderHTML(response));
            out.write(" ");
        }
    %&gt;
&lt;/body&gt;
&lt;/html&gt;</code></div>
</div>
<br><hr class="separator"><div class="copyright">&copy; 2022 Advanced Software Engineering Limited. All rights reserved.</div>
</body>
</HTML>
